import { Trans, t } from "@lingui/macro";
import "./points.scss";
import { numberToFixedCommas } from "lib/numbers";
import roleIcon from "img/airdrop/role.svg";
import moxIcon from "img/airdrop/Earnings.svg";
import Tooltip from "components/Tooltip/Tooltip";
// import { useLeaderboardData } from "pages/Leaderboard/useLeaderboard";
import { useEffect, useState } from "react";
import useWallet from "lib/wallets/useWallet";

export default function PointsDashboard({ pageData }) {

  const [positions, setPositions] = useState<any>("--")
  const { account } = useWallet() as any;

  useEffect(() => {
    let RankText: any = ''
    const index = pageData?.rank
    if (!account || !index) {
      RankText = '--'
    } else if (index > 0 && index <= 200) {
      RankText = <span className="text-[#FFF FFF]"># {index || '--'}</span>;
    } else {
      RankText = <Trans>Outside of 200</Trans>;
    }
    setPositions(RankText)
  }, [account, pageData])

  return (
    // <div className="border-[1px] border-solid border-[#FFFFFF1A] flex-1 border-radius">
    <div className="w-full flex flex-row justify-end border-solid border-[#FFFFFF1A] border-l-[1px] border-t-[1px] border-b-[1px] md:flex-wrap md:flex-nowrap max-md:flex-col">
        <div className="w-[100%] flex-1 p-10 md:w-[unset] md:pr-[27px] md:border-r md:border-[#FFFFFF1A] border-solid flex border-bottom items-center gap-[13px]">
        <div>
          <img className="w-[43px] h-[43px]" src={roleIcon} alt="" />
        </div>
        <div className="flex flex-col justify-between">
          <div className="text-[16px] text-[#A8A8A8] font-normal">
            <Trans>My Total Points</Trans>
          </div>
          <div className="text-[22px] text-[#dffe00] mt-[21px] leading-[22px]">
            {numberToFixedCommas(pageData?.total || 0)}
          </div>
        </div>
      </div>
      <div className="w-[100%] flex-1 p-10 md:w-[unset] md:pr-[27px] md:border-r md:border-[#FFFFFF1A] border-solid flex border-bottom items-center gap-[13px]">
        <div>
          <img className="w-[43px] h-[43px]" src={moxIcon} alt="" />
        </div>
        <div className="flex flex-col justify-between">
          <div className="text-[16px] text-[#A8A8A8] font-normal">
            <Trans>Earnings</Trans>
          </div>
          <div className="text-[22px] text-[#dffe00] mt-[21px] leading-[22px]">
            {'--'} esMOX
          </div>
        </div>
      </div>
      <div className="w-[100%] flex-1 p-10 md:w-[unset] md:px-[27px] md:border-r md:border-[#FFFFFF1A] border-solid flex flex-col justify-between border-bottom padding-top">
        <div className="flex justify-between py-[5px]">
          <div className="text-[16px] text-[#A8A8A8] font-normal">Your Position: </div>
          <div className="text-[16px] text-[#FFFFFF] font-normal">{positions || '--'}</div>
        </div>
        <div className="flex justify-between py-[5px]">
          <div className="text-[16px] text-[#A8A8A8] font-normal">
            <Tooltip
              handle={t`Rate`}
              renderContent={() => {
                return (
                  <div>
                    <Trans>The rate will be calculated after the points campaign ends.</Trans>
                  </div>
                );
              }}
            />
          </div>
          <div className="text-[16px] text-[#FFFFFF] font-normal">1 Points = -- esMOX</div>
        </div>
        <div className="flex justify-between py-[5px]">
          <div className="text-[16px] text-[#A8A8A8] font-normal">Airdrop Date: </div>
          <div className="text-[16px] text-[#FFFFFF] font-normal">Coming Soon</div>
        </div>
      </div>
    </div>
    // </div>
  );
}
